<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <main>
   <div class="header">
    <span> <img @click="goBack" class="Back"  src="../../assets/icon/hdpi/fh.png" alt=""></span>
    <span class="x1">H币提现</span>
    <router-link to="Withdrawalrecord">
    <span class="x2">提现记录</span>
    </router-link >
   </div>
    <div class="withdraw">
     <span class="withdraw1">到账银行卡</span>
       <span class="withdraw2">中国建设银行</span>
       <span class="withdraw3">当天24点前到账</span>
    </div>
    <div class="withdraw4">
         <div>
            <p class="withdraw5">提现金额</p>
    <input class="withdraw6" type="number" v-model.number="withdrawAmount" placeholder="请输入提现金额" />  
    <button class="withdraw11"  @click="handleWithdraw">提现</button>  
  </div>   
    </div>
    <div class="withdraw8">
     <input type="checkbox" class="withdraw9">
     <span class="withdraw10">全部提现。3050H币,可提现30元</span>
     <router-link to="purse">
        
     </router-link>
    </div>
  </main>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'; 
import { ref } from 'vue'; 
const router = useRouter(); 

const withdrawAmount = ref();
const handleWithdraw = () => {  
  if (withdrawAmount.value <= 0) {  
    alert('提现金额必须大于0！');  
    
    return;  
  }  
  // 这里假设你有一个方法或函数来模拟余额的减少  
  // 但实际上，在这个场景下，我们只是将提现金额传递到下一个页面  
  router.push({ name: 'purse', query: { withdrawAmount: withdrawAmount.value } });  
};
function goBack() {  
      router.push('/purse')
    } 
</script>
<style>
.header
{
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-around;
}

.header x1{
    margin-left: 110px;
    font-size: 18px;
}
.header x2{
    font-size: 13px;
    margin-left: 60px;
}
.withdraw{
    width: 100%;
    height: 80px;
    background: #f2f2f2;
    margin-top: 50px;
    border-radius: 8px;
}
.withdraw1{
    position: absolute;
    top: 130px;
    left: 50px;
    font-size: 13px;
}
.withdraw2{
    position: absolute;
    top: 130px;
    left: 130px;
    font-size: 13px;
}
.withdraw3{
    position: absolute;
    top: 155px;
    left: 130px;
    font-size: 13px;
    color: #2d7fdc;
}
.withdraw4{
    width: 100%;
    height: 120px;
    background: #f2f2f2;
    margin-top: 5px;
}
.withdraw5{
    position: absolute;
    font-size: 18px;
    top: 220px;
    left: 50px;
}
.withdraw6{
    position: absolute;
    top: 260px;
    left: 50px;
    border: none;
}
.withdraw7{
    position: absolute;
    top: 230px;
    left: 100px;
    font-size: 60px;
    color: #2d7fdc;
}
.withdraw8{
    width: 100%;
    height: 120px;
    background: #f2f2f2;
    margin-top: 2px;
}
.withdraw9{
    position: absolute;
    left: 50px;
    top: 325px;
}
.withdraw10{
    position: absolute;
    top: 321px;
    font-size: 13px;
    left: 80px;
}
.withdraw11{
    width:60%;
    height: 35px;
    background: #2d7fdc;
    position: absolute;
    top: 370px;
    border: none;
    color: #fff;
   border-radius: 5px;
   left: 80px;
}
.withdrawal-container {  
  padding: 20px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
}
</style>